<template>
<div class="login-container">
    <a-input v-model:value="username" :placeholder="$ti18('login.account','请输入账号','','input')"></a-input>
    <div>&nbsp;</div>
    <a-input v-model:value="password" :placeholder="$ti18('login.passwordWarning','请输入密码')"></a-input>
    <div v-if="!ignoreValidCode">&nbsp;
        <a-input v-model:value="validCode" :placeholder="$ti18('login.validCode','请输入验证码','','input')"></a-input>
        <img class="getCaptcha" :src="codeSrc" @click="getImgCode">
    </div>
    <a-button @click="login" type="primary">{{$ti18('login.login','登录')}}</a-button>
</div>
</template>

<script>
import LoginApi from "@/common/api/login.js";
import uuid from "@/common/util/uuid.js"
import { mapActions } from 'pinia'
import md5 from "js-md5";
import userUser from "../stores/userUser";

export default {
    name: "Login",
    data(){
        return {
            //账号
            username:'',
            //密码
            password:'',
            //验证码
            validCode:'',
            //登录生成的随机ID,用于生成图片
            deviceId: "",
            //验证码图片路径
            codeSrc:"",
            ignoreValidCode:false,
            //密码模式
            passwordMode: "default",
            //非对称公钥
            passwordPublicKey:"",
            //跳转URL
            redirect:""
        }
    },
    created(){
        //取跳转URL
        if( this.$route.query &&  this.$route.query.redirect){
            this.redirect = this.$route.query.redirect;
        }
        //获取验证码
        this.getImgCode();
        //获取登录相关的配置参数
        this.getLoginConfig();
    },
    methods:{
        ...mapActions(userUser,['setPasswordMode','Login']),
        //获取验证码
        async getImgCode() {
            this.deviceId = uuid.uuid(16, 32);
            await LoginApi.imgcode(this.deviceId).then(res => {
                const raw = res.data
                this.codeSrc = URL.createObjectURL(raw)
            })
        },
        getJSEncryptPassword(password){
            // 新建JSEncrypt对象
            let encryptor = new JSEncrypt();
            encryptor.setPublicKey(this.passwordPublicKey);
            let jm_data = encryptor.encrypt(password);
            // 加密数据
            return jm_data;
        },
        //获取登录相关的配置参数
        async getLoginConfig() {
            let self = this;
            await LoginApi.getLoginConfig().then((resp) => {
                //是否显示验证码
                self.ignoreValidCode = resp.data.ignoreValidCode=="true"?true:false;
                //密码加密模式
                self.setPasswordMode(resp.data.passwordmode);
                self.passwordMode = resp.data.passwordmode;
                self.passwordPublicKey=resp.data.passwordPublicKey;
            });
        },
        //登录
        login(){
            let loginParams={
                username:this.username.trim(),
                deviceId:this.deviceId,
                validCode:this.validCode,
                password:this.password.trim()
            }
            if(this.passwordPublicKey){
                loginParams.password=this.getJSEncryptPassword(this.password.trim());
            } else if ("md5" == this.passwordMode) {
                loginParams.password =md5(this.password.trim())
            }
            let self=this;
            this.Login(loginParams,function (res,err){
                if(!err){
                    self.loginSuccess(res);
                }else {
                    self.requestFailed(err)
                }
            })
        },
        //登录成功处理
        loginSuccess(res) {
            if (res.code === 200) {
                //存在需要跳转的URL,则跳转到指定的URL
                if (this.redirect) {
                    this.$router.push({path: this.redirect});
                } else {
                    this.$router.push({name: 'home'}, () => {
                        // this.$notification.success({
                        //     message: '欢迎',
                        //     description: `${timeFix()}，欢迎回来`
                        // })
                    })
                }
            } else {
                this.requestFailed(res)
            }
        },
        //登录失败处理
        requestFailed(err) {
            this.getImgCode()
        },
    }
}
</script>

<style scoped>
.login-container{
    width: 600px;
    margin:40px auto;
}
</style>
